<template>
  <div class="left-maps bg-white-6 text-grey-9">
    <q-scroll-area :class="readonly ? 'full-height' : ''" :visible="false" class="maps-list-cls column">
      <template v-for="map in maps" :key="map.id">
        <div :class="activeCls(map)"
          class="map-height-cls cursor-pointer text-caption column items-center justify-center"
          @click.stop="toggleMap(map)">
          <q-icon name="mdi-map-marker-radius-outline" size="24px"></q-icon>
          <qx-tooltip>{{ map.mapName }}</qx-tooltip>
        </div>
      </template>
    </q-scroll-area>

    <q-resize-observer @resize="onResize"></q-resize-observer>
  </div>
  <template v-if="!readonly">
    <EditMap v-model="modalVisible" :mapCodes="filterMapCodes" />
    <q-modal v-model="syncVisible" :header="$t('MapCore.SynchronizeRCSMap')" width="400" @beforeClose="beforeSyncClose"
      @confirm="submitSync">
      <qx-form ref="SyncRef" v-model="syncForm" :option="syncOption"></qx-form>
    </q-modal>
  </template>
</template>

<script setup>
import { i18n, toI18nName } from 'boot/i18n'
import { postAPI } from 'src/api'
import { createSuccessTips } from 'src/utils/utils'
import { computed, ref, watch } from 'vue'
import EditMap from './EditMap.vue'

const props = defineProps({ maps: Array, readonly: Boolean, modelValue: { type: Object, default: () => ({}) } })
const emits = defineEmits(['updateMaps', 'update:modelValue'])

const mapH = ref(60)
const syncForm = ref({})
const mapCodes = ref([])
const AGVBrands = ref([])
const SyncRef = ref(null)
const areaHeight = ref(0)
const syncVisible = ref(false)
const modalVisible = ref(false)
const screenSize = ref({ width: 0, height: 0 })

const syncOption = computed(() => {
  return {
    span: 22, labelWidth: 100,
    column: [{
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', required: true,
      options: AGVBrands.value, props: { label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' }
    }, {
      label: `${i18n.t('MapCore.GroundCodeType')}`, field: 'mapGroundCode', type: 'select', required: true,
      options: mapCodes.value, props: { label: toI18nName('labelZhCn'), value: 'key' }
    }, {
      label: `${i18n.t('MapCore.RCSMapName')}`, field: 'mapGroundName'
    }]
  }
})

const activeCls = computed(() => map => map?.id === props.modelValue.id ? 'text-primary' : '')
const filterMapCodes = computed(
  () => mapCodes.value.filter(el => !(props.maps || []).find(map => map.mapGroundCode === el.key)))

const formatH = () => {
  const length = props.maps?.length || 0
  const usableH = screenSize.value.height - 2 * mapH.value
  if (length * mapH.value > usableH) areaHeight.value = usableH
  else areaHeight.value = length * mapH.value
}

watch(() => props.maps?.length, () => formatH())

const onResize = size => {
  screenSize.value = size
  formatH()
}
const toggleMap = map => emits('update:modelValue', map)


const beforeSyncClose = () => {
  if (SyncRef.value) SyncRef.value.onReset()
  syncVisible.value = false
}
const submitSync = mDone => {
  SyncRef.value.validate((form, done) => {
    postAPI('/yfagv/api/syncRcsToFactoryApi/syncMap', form, () => {
      emits('updateMaps', form.mapGroundCode)
      createSuccessTips({ title: `${i18n.t('LogCore.OperationTip')}` })
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}
</script>

<style lang="scss" scoped>
.maps-list-cls {
  height: 100%
}

.map-height-cls {
  padding: .5rem;
  position: relative;
  height: v-bind('`${mapH}px`');

  &:hover {
    opacity: .7;
    color: var(--q-primary);
  }

  .icon-group-cls {
    left: -.2rem;
  }

  .scale-icon-cls {
    position: absolute;
    transform: scale(.9);
    bottom: 0;
    left: .96rem;
  }
}
</style>